<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>下拉菜单</title>
    <style>
            body{
                margin:0px;
            }
            nav{
                width:100%;
                background-color:#121312;
            }
            .container{
                width:1200px;
                margin:0px auto;
            }
            .nav-container{
                display: flex;
                justify-content: space-between;
            }
            .nav-container>ul{
                margin:0px;
                padding:0px;
                list-style: none;
                display: flex;
            }
            li{
                width:100px;
                height:70px;
                line-height:70px;
                text-align: center;
                margin-left:20px;
            }
            a{
                color:#b2babd;
                text-decoration: none;
            }
            li:hover a{
                color:#b08a5d;
            }
            .inner{
                margin:0px;
                padding:0px;
                list-style: none;
                background-color:#121312;
                display: none;
            }
            .inner li{
                position: relative;
                left:-20px;
            }
            .nav-container>ul>li:hover .inner{
                display: block;
            }
            .nav-container>ul>li:hover .inner li a{
                color:white;
            }
            .inner>li:hover{
                background-color:#534a36;
            }
    </style>
</head>

<body>
    <nav>
        <div class="container nav-container">       
            <ul class="nav-left">
                    <li><a href="#">会员首页</a></li>
                    <li>
                        <a href="#">看电影
                            <ul class="inner">
                                <li><a href="#">华语电影</a></li>
                                <li><a href="#">欧美大片</a></li>
                            </ul>
                        </a>
                    </li>
                    <li>
                        <a href="#">看剧
                            <ul class="inner">
                                <li><a href="#">英剧</a></li>
                                <li><a href="#">美剧</a></li>
                                <li><a href="#">韩剧</a></li>
                                <li><a href="#">港剧</a></li>
                            </ul>
                        </a>
                    </li>
                    <li><a href="#">看漫画</a></li>
                    <li><a href="#">记录片</a></li>
                    <li><a href="#">德云社</a></li>
                    <li><a href="#">看直播</a></li>
            </ul>
            <ul class="nav-right">
                <li><a href="#">我的会员</a></li>
                <li><a href="#">会员卡</a></li>
           </ul>
        </div>
    </nav>
</body>

</html>